<template>
  <view class="particulars">
    <!-- 可滚动视图，垂直滚动 -->
    <scroll-view scroll-y="true" class="scroll-view">
      <!-- 头像部分 -->
      <uni-card :cover="user.avatar" class="overlay-text">
        <div :class="shade"></div>
      </uni-card>

      <!-- 基本信息部分 -->
      <img
        src="../../../static/detaile/role.png"
        alt=""
        style="width: 20px; height: 20px; margin-left: 10px"
      />
      <text class="particulars-title">详细信息</text>

      <!-- 如果shade为'overlay'则显示登录提示，否则显示用户详细信息 -->
      <view v-if="shade === 'overlay'">
        <button class="particulars-lock">
          <img src="../../../static/detaile/lock.png" style="width: 20px; height: 20px" />
          登录注册后可看个人资料
        </button>
      </view>
      <view v-else class="user-details">
        <view class="detail-item">
          <!-- 年龄 -->
          <view>
            <text class="label">年龄:</text>
            <text class="value">{{ user.age }}</text>
          </view>
          <!-- 身高 -->
          <view>
            <text class="label">身高:</text>
            <text class="value">{{ user.height }}</text>
          </view>
          <!-- 住址 -->
          <view>
            <text class="label">住址:</text>
            <text class="value">{{ user.address }}</text>
          </view>
          <!-- 婚姻状况 -->
          <view>
            <text class="label">婚姻状况:</text>
            <text class="value">{{ user.maritalStatus }}</text>
          </view>
        </view>
      </view>

      <!-- 择偶标准部分 -->
      <img
        src="../../../static/detaile/select.png"
        alt=""
        style="width: 20px; height: 20px; margin-left: 10px"
      />
      <text class="particulars-title">择偶标准</text>

      <!-- 如果shade为'overlay'则显示登录提示，否则显示择偶标准 -->
      <view v-if="shade === 'overlay'">
        <button class="particulars-lock">
          <img src="../../../static/detaile/lock.png" style="width: 20px; height: 20px" />
          登录注册后可看择偶要求
        </button>
      </view>
      <view v-else class="user-details">
        <view class="detail-item">
          <!-- 年龄范围 -->
          <view>
            <text class="label">年龄范围:</text>
            <text class="value">{{ tother.age_range }}</text>
          </view>
          <!-- 最低学历 -->
          <view>
            <text class="label">最低学历:</text>
            <text class="value">{{ tother.minimum_education }}</text>
          </view>
          <!-- 最低收入 -->
          <view>
            <text class="label">最低收入:</text>
            <text class="value">{{ tother.minimum_income }}</text>
          </view>
          <!-- 房子要求 -->
          <view>
            <text class="label">房子要求:</text>
            <text class="value">{{ tother.desired_housing_status }}</text>
          </view>
          <!-- 期望结婚时间 -->
          <view>
            <text class="label">期望结婚时间:</text>
            <text class="value">{{ tother.marriage_expectation }}</text>
          </view>
        </view>
      </view>

      <!-- 自我评价部分 -->
      <img src="../../../static/detaile/mysay.png" alt="" style="width: 40px; height: 40px" />
      <text class="particulars-title">自我评价</text>

      <!-- 如果shade为'overlay'则显示登录提示，否则显示自我评价 -->
      <view v-if="shade === 'overlay'">
        <button class="particulars-lock">
          <img src="../../../static/detaile/lock.png" style="width: 20px; height: 20px" />
          登录注册后可看自我介绍
        </button>
      </view>
      <view v-else class="user-details">
        <view class="detail-item">
          <text class="value">{{ user.self_introduction }}</text>
        </view>
      </view>

      <!-- 占位以避免滚动内容被底部按钮遮挡 -->
      <div style="height: 80px"></div>
    </scroll-view>

    <!-- 底部按钮 -->
    <view class="footer">
      <!-- 分享按钮 -->
      <view class="fenxiang">
        <img src="../../../static/detaile/fenxiang.png" alt="" class="foter-img" />
      </view>
      <!-- 联系红娘按钮，跳转到首页 -->
      <navigator
        class="jiao lianxi"
        hover-class="none"
        open-type="switchTab"
        url="/pages/index/index"
      >
        <view class="imgg">
          <img class="xiaopng foter-img" src="../../../static/detaile/xiaoxi.png" alt="" />
        </view>
        <text style="margin-left: 5px">联系红娘</text>
      </navigator>
      <!-- 红娘牵线按钮，跳转到红娘页面 -->
      <navigator
        class="jiao red"
        hover-class="none"
        open-type="switchTab"
        url="/pages/matchmaker/matchmaker"
      >
        <view class="girl">
          <img class="xiaopng foter-img" src="../../../static/detaile/girl.png" alt="" />
        </view>
        <text style="margin-left: 5px">红娘牵线</text>
      </navigator>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { http } from '@/utils/http'
// import { token } from 'pinia'

//当前用户的基本信息
const user = ref({})
//当前用户的择偶标准
const tother = ref({})
//判断是否登录
const shade = ref('overlay')
//获取传来的id
const id = ref('')
const getlist = async () => {
  http({
    url: 'https://60.215.128.73:43175/app/post/api/v1/develop/seek/recommend',
    method: 'POST',
    data: {
      my_id: id,
    },
  }).then((res) => {
    console.log(res)
    // user.value = res.data
  })
}
// 验证是否有token
onMounted(() => {
  const page: any = getCurrentPages().pop()
  id.value = page.options.id //接收id

  // getlist() //请求数据

  // if(token){
  //   shade.value = ''
  // }
})
</script>
<style lang="scss" scoped>
.scroll-view {
  height: 100%;
  overflow-y: scroll; /* 确保Y轴可以滚动 */
  border: 1px solid #ccc; /* 可选，添加一个边框以便于查看 */
}
.foter-img {
  height: 28px;
  width: 28px;
}
.particulars-lock {
  background-color: rgb(124, 210, 221);
  width: 70%;
  border-radius: 25px;
  padding: 5px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin-top: 20px;
  margin-bottom: 20px;
}

.image-container {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(241, 239, 239, 0.5);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.overlay-text {
  height: 100px;
}

.footer {
  position: fixed;
  bottom: 0;
  height: 75px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background: white;
  padding: 10px 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 5px;
}

.footer .jiao {
  padding: 10px;
  background: pink;
  border-radius: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer .fenxiang {
  width: 50px;
  height: 50px;
  background: linear-gradient(90deg, #d491f9, #be6cec);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer .lianxi,
.footer .red {
  height: 50px;
  background: linear-gradient(90deg, #29b6c8, #11aec2);
  border-radius: 50px;
  padding: 10px;
  color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer .red {
  background: linear-gradient(90deg, #fb7b63, #fa5638);
}

.footer .imgg,
.footer .girl {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.particulars-title {
  font-size: 18px;
  color: #000;
  margin-left: 10px;
  letter-spacing: 1px;
}

.user-details {
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px #dfb8b8;
  background-color: #f1eef1;
  .detail-item {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    word-wrap: break-word;
    .label {
      margin-left: 10px;
      color: #c23c86;
    }
    .value {
      margin-left: 10px;
      color: #3cc2bb;
    }
  }
}
</style>
